<template>
	<view class="chooseCar">
		<view class="top">
			<navigator open-type="navigateBack" delta="1">
				<image src="https://z3.ax1x.com/2021/04/08/cYSVW4.png" mode="widthFix" style="width: 80rpx;"></image>
			</navigator>
			<view class="top-title">
				选择品牌
			</view>
		</view>
		<view class="love-car-search">
			<view class="content-center">
				<view class="tool-search-input">
					<image class="search-back-icon" src="https://z3.ax1x.com/2021/04/08/cYpC1H.png"></image>
					<text>请输入车系名字（如：朗逸）</text>
				</view>
			</view>
			<view class="saoma">
				<image src="https://z3.ax1x.com/2021/04/09/cUpAot.png"></image>
				<view class="saomaText">
					扫码识车
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="bottom-content-host">
				<view class="host-title">热门品牌</view>
				<view class="brand-logo">
					<view class="brand-item" v-for="item in hotBrand" :key="item.id">
						<image :src="item.brandImg" class="brand-img"></image>
						<view class="brand-text">
							{{item.title}}
						</view>
					</view>
				</view>
			</view>
			<view class="bottom-content-type">
				<view class="type-item" v-for="item1 in type" :key="item1.id">
					<view class="type-title">{{item1.text}}</view>
					<view class="type-content" v-for="item2 in item1.children" :key="item2.id"
						@click="openDrawer(item2.name)">
						<view class="type-content-item">
							<image :src="item2.carLogo" mode=""></image>
							<text>{{item2.name}}</text>
						</view>
					</view>
				</view>
				<uni-drawer mode="right" ref="drawer" mask="true" width="250">
					<view class="uni-drawer-content">
						<view class="car-list-title">
							选择车系
						</view>
						<view class="car-list-all">
							<view class="car-list-item">
								<view class="item-top">
									<image src="https://z3.ax1x.com/2021/04/10/calves.png" mode=""></image>
									<text>{{currentCar}}</text>
								</view>
								<view class="item-center">
									{{currentCar}}
								</view>
								<view class="item-bottom">
									<view class="item-item">
										<navigator :url="'/pages/home/chooseEngine?currentCar='+currentCar">100</navigator>
									</view>
									<view class="item-item">100</view>
									<view class="item-item">200</view>
									<view class="item-item">300</view>
									<view class="item-item">400</view>
									<view class="item-item">500</view>
									<view class="item-item">600</view>
									<view class="item-item">700</view>
									<view class="item-item">800</view>
								</view>
							</view>
						</view>
					</view>
				</uni-drawer>
				<view class="letters">
					<view :class="['letters-item',item3.state?'active':'']" @click="changeLettersState(item3.id)"
						v-for="item3 in letters" :key="item3.id">{{item3.text}}</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hotBrand: [{
						id: 0,
						title: "奥迪",
						brandImg: "https://z3.ax1x.com/2021/04/10/calves.png"
					},
					{
						id: 1,
						title: "别克",
						brandImg: "https://z3.ax1x.com/2021/04/10/ca8aQS.png"
					},
					{
						id: 2,
						title: "奔驰",
						brandImg: "https://z3.ax1x.com/2021/04/10/ca8dsg.png"
					},
					{
						id: 3,
						title: "宝马",
						brandImg: "https://z3.ax1x.com/2021/04/10/cai3LD.png"
					},
					{
						id: 4,
						title: "大众",
						brandImg: "https://z3.ax1x.com/2021/04/10/cai1sO.png"
					},
					{
						id: 5,
						title: "长安",
						brandImg: "https://z3.ax1x.com/2021/04/10/caiUJI.png"
					},
					{
						id: 6,
						title: "福特",
						brandImg: "https://z3.ax1x.com/2021/04/10/caiJdH.png"
					},
					{
						id: 7,
						title: "吉利",
						brandImg: "https://z3.ax1x.com/2021/04/10/caiYod.png"
					},
					{
						id: 8,
						title: "日产",
						brandImg: "https://z3.ax1x.com/2021/04/10/caiNFA.png"
					}
				],
				type: [{
						id: "A",
						text: "A",
						children: [{
								id: "0",
								name: "AC Schnitzer",
								carLogo: "//car3.autoimg.cn/cardfs/series/g27/M01/B0/62/autohomecar__ChcCQFs9vBKAO3YSAAAW0WOWvRc555.png",
								children: [{
										id: "0-0",
										name: "100"
									},
									{
										id: "0-1",
										name: "101"
									},
									{
										id: "0-2",
										name: "102"
									}
								]
							},
							{
								id: "1",
								name: "阿斯顿・马丁",
								carLogo: "//car2.autoimg.cn/cardfs/series/g26/M06/AE/B5/autohomecar__wKgHEVs9u6GAPWN8AAAYsmBsCWs847.png",
								children: [{
										id: "1-0",
										name: "100"
									},
									{
										id: "1-1",
										name: "101"
									},
									{
										id: "1-2",
										name: "102"
									}
								]
							}
						],
					},
					{
						id: "B",
						text: "B",
						children: [{
								id: "0",
								name: "保时捷",
								carLogo: "//car3.autoimg.cn/cardfs/series/g29/M02/AF/A7/autohomecar__ChcCSFs9s3yAIrmSAAAedbUb4DQ224.png",
								children: [{
										id: "0-0",
										name: "100"
									},
									{
										id: "0-1",
										name: "101"
									},
									{
										id: "0-2",
										name: "102"
									}
								]
							},
							{
								id: "1",
								name: "本田",
								carLogo: "//car3.autoimg.cn/cardfs/series/g29/M0B/AF/A0/autohomecar__ChcCSFs9s1iAGMiNAAAlP_CBhLY618.png",
								children: [{
										id: "1-0",
										name: "100"
									},
									{
										id: "1-1",
										name: "101"
									},
									{
										id: "1-2",
										name: "102"
									}
								]
							}
						],
					},
					{
						id: "C",
						text: "C",
						children: [{
								id: "0",
								name: "长安",
								carLogo: "//car2.autoimg.cn/cardfs/series/g30/M01/B0/2A/autohomecar__wKgHPls9uL6AX7bwAAArnGJzV54937.png",
								children: [{
										id: "0-0",
										name: "100"
									},
									{
										id: "0-1",
										name: "101"
									},
									{
										id: "0-2",
										name: "102"
									}
								]
							},
							{
								id: "1",
								name: "长安欧尚",
								carLogo: "//car2.autoimg.cn/cardfs/series/g28/M0B/B0/13/autohomecar__ChcCR1s9vUCABiGBAAA7IcILrv4772.png",
								children: [{
										id: "1-0",
										name: "100"
									},
									{
										id: "1-1",
										name: "101"
									},
									{
										id: "1-2",
										name: "102"
									}
								]
							}
						],
					},
					{
						id: "D",
						text: "D",
						children: [{
								id: "0",
								name: "道奇",
								carLogo: "//car2.autoimg.cn/cardfs/series/g26/M0B/B4/06/autohomecar__ChcCP1s-vICAfczWAAA6Go9ioGI755.png",
								children: [{
										id: "0-0",
										name: "100"
									},
									{
										id: "0-1",
										name: "101"
									},
									{
										id: "0-2",
										name: "102"
									}
								]
							},
							{
								id: "1",
								name: "东风风行",
								carLogo: "//car2.autoimg.cn/cardfs/series/g29/M01/AE/FB/autohomecar__wKgHG1s9vQGAVg3PAAAWc8enfOw834.png",
								children: [{
										id: "1-0",
										name: "100"
									},
									{
										id: "1-1",
										name: "101"
									},
									{
										id: "1-2",
										name: "102"
									}
								]
							}
						],
					},
					{
						id: "E",
						text: "E",
						children: [{
								id: "0",
								name: "法拉利",
								carLogo: "//car3.autoimg.cn/cardfs/series/g26/M02/AF/D4/autohomecar__wKgHHVs9uRGAKwulAAAcefsPoas770.png",
								children: [{
										id: "0-0",
										name: "100"
									},
									{
										id: "0-1",
										name: "101"
									},
									{
										id: "0-2",
										name: "102"
									}
								]
							},
							{
								id: "1",
								name: "丰田",
								carLogo: "//car3.autoimg.cn/cardfs/series/g29/M04/AF/BE/autohomecar__wKgHJFs9vGSAY09jAAAvZAwDhiM445.png",
								children: [{
										id: "1-0",
										name: "100"
									},
									{
										id: "1-1",
										name: "101"
									},
									{
										id: "1-2",
										name: "102"
									}
								]
							}
						],
					}
				],
				letters: [{
						id: "A",
						text: "A",
						state: false
					},
					{
						id: "B",
						text: "B",
						state: false
					},
					{
						id: "C",
						text: "C",
						state: false
					},
					{
						id: "D",
						text: "D",
						state: false
					},
					{
						id: "E",
						text: "E",
						state: false
					},
					{
						id: "F",
						text: "F",
						state: false
					},
					{
						id: "G",
						text: "G",
						state: false
					},
					{
						id: "H",
						text: "H",
						state: false
					},
					{
						id: "I",
						text: "I",
						state: false
					},
					{
						id: "J",
						text: "J",
						state: false
					},
					{
						id: "K",
						text: "K",
						state: false
					},
					{
						id: "L",
						text: "L",
						state: false
					},
					{
						id: "M",
						text: "M",
						state: false
					},
					{
						id: "N",
						text: "N",
						state: false
					},
					{
						id: "O",
						text: "O",
						state: false
					},
					{
						id: "P",
						text: "P",
						state: false
					},
					{
						id: "Q",
						text: "Q",
						state: false
					},
					{
						id: "R",
						text: "R",
						state: false
					},
					{
						id: "S",
						text: "S",
						state: false
					},
					{
						id: "T",
						text: "T",
						state: false
					},
					{
						id: "U",
						text: "U",
						state: false
					},
					{
						id: "V",
						text: "V",
						state: false
					},
					{
						id: "W",
						text: "W",
						state: false
					},
					{
						id: "X",
						text: "X",
						state: false
					},
					{
						id: "Y",
						text: "Y",
						state: false
					},
					{
						id: "Z",
						text: "Z",
						state: false
					}
				],
				carList: [],
				currentCar:null
			};
		},
		onLoad(options) {
			this.getBrand()
		},
		methods: {
			changeLettersState(val) {
				this.letters.map((item) => {
					if (val == item.id) {
						return item.state = true
					} else {
						return item.state = false
					}
				})
			},
			onchange(e) {
				console.log(e)
				// const value = e.detail.value
			},
			openDrawer(val) {
				this.currentCar = val
				this.$refs.drawer.open()
			}
		},
		computed: {
			// getCarList(){

			// }
		}
	}
</script>

<style lang="scss" scoped>
	.chooseCar {
		.top {
			width: 100vw;
			height: 200rpx;
			box-sizing: border-box;
			background-image: linear-gradient(to right, #FF7C16, #FF5401);
			display: flex;
			align-items: center;
			padding-top: 120rpx;
			box-sizing: border-box;

			image {
				width: 64rpx;
				height: 64rpx;
			}

			.top-title {
				margin-left: 240rpx;
				color: white;
				font-size: 36rpx;
				font-weight: bold;
			}
		}

		.love-car-search {
			display: flex;
			align-items: center;

			.content-center {
				width: 80vw;
				margin: 20rpx auto 0rpx;

				.tool-search-input {
					width: 100%;
					height: 70rpx;
					line-height: 70rpx;
					border-radius: 40rpx;
					border: 2rpx solid #ffaa00;
					color: #FF841D;
					display: flex;
					align-items: center;

					.search-back-icon {
						width: 32rpx;
						height: 32rpx;
						margin-left: 20rpx;
						margin-right: 20rpx;
					}
				}
			}

			.saoma {
				text-align: center;
				margin-top: 20rpx;
				margin-right: 20rpx;

				image {
					width: 40rpx;
					height: 40rpx;
				}

				.saomaText {
					font-size: 24rpx;
					color: #FF7C16;
				}
			}
		}

		.bottom {
			width: 100vw;
			height: 100vh;
			margin-top: 20rpx;

			.bottom-content-host {
				margin-bottom: 20rpx;

				.host-title {
					font-weight: bold;
					font-size: 36rpx;
					width: 100vw;
					height: 80rpx;
					line-height: 80rpx;
					padding-left: 20rpx;
					box-sizing: border-box;
					background-color: #f9f9f9;
				}

				.brand-logo {
					width: 100vw;
					// height: 500rpx;
					background-color: white;
					display: flex;
					flex-wrap: wrap;

					.brand-item {
						width: 145rpx;
						height: 145rpx;
						// border: 1px solid red;
						text-align: center;
						font-family: "黑体";
						margin-top: 20rpx;

						.brand-img {
							// border: 1px solid red;
							width: 100rpx;
							height: 100rpx;
						}
					}
				}
			}

			.bottom-content-type {
				position: relative;

				.type-item {
					.type-title {
						font-weight: bold;
						font-size: 32rpx;
						width: 100vw;
						height: 80rpx;
						line-height: 80rpx;
						padding-left: 20rpx;
						box-sizing: border-box;
						background-color: #f9f9f9;
					}

					.type-content {
						width: 100vw;
						height: 100rpx;

						// border: 1px solid red;
						.type-content-item {
							height: 100rpx;
							display: flex;
							align-items: center;
							// background-color: red;
							margin-top: 20rpx;

							image {
								width: 100rpx;
								height: 100rpx;
								margin-left: 20rpx;
								margin-right: 20rpx;
							}
						}
					}
				}

				.uni-drawer-content {
					width: 100vw;
					height: 200rpx;
					background-color: #FF5401;

					.car-list-title {
						font-size: 32rpx;
						font-weight: bold;
						box-sizing: border-box;
						padding-top: 150rpx;
						color: white;
						padding-left: 20rpx;
					}

					.car-list-all {
						width: 100%;
						height: 100vh;
						margin-top: 20rpx;

						// background-color: black;
						.car-list-item {
							.item-top {
								image {
									width: 100rpx;
									height: 100rpx;
									vertical-align: middle;
									margin-left: 30rpx;
								}

								text {
									font-family: "黑体";
									margin-left: 50rpx;
									vertical-align: middle;
								}
							}

							.item-center {
								width: 100%;
								height: 80rpx;
								background-color: #f9f9f9;
								line-height: 80rpx;
								padding-left: 30rpx;
								box-sizing: border-box;
							}

							.item-bottom {
								.item-item {
									width: 100%;
									height: 80rpx;
									line-height: 80rpx;
									padding-left: 30rpx;
									box-sizing: border-box;
									border-bottom: 1px solid #f9f9f9;
								}
							}
						}
					}
				}

				.letters {
					position: absolute;
					right: 20rpx;
					top: 20rpx;
					text-align: center;

					.letters-item {
						font-size: 26rpx;
						margin-top: 5rpx;

						&.active {
							color: #FF7C16;
						}
					}
				}
			}

		}
	}
</style>
